<template>
  <Transition name="down">
    <div class="sw-message" :style="style[type]" v-show='isShow'>
      <CloseCircleFilled v-if="type === 'error'" :style="iconStyle" />
      <CheckCircleFilled v-if="type === 'success'" :style="iconStyle" />
      <InfoCircleFilled v-if="type === 'warning'" :style="iconStyle" />
      <ExclamationCircleFilled v-if="type === 'info'" :style="iconStyle" />
      <div class="info-box">
        <div>{{message}}</div>
      </div>
      <!-- <CloseOutlined class="close-icon" @click="closeMessage" /> -->
    </div>
  </Transition>
</template>
<script lang="ts" setup>
import { onMounted, ref, toRefs } from 'vue'
import { CloseCircleFilled, CheckCircleFilled, InfoCircleFilled, ExclamationCircleFilled, CloseOutlined } from '@ant-design/icons-vue';

const props = withDefaults(defineProps<{
  message: string,
  close: () => void
  type?: string,
}>(), {
  type: 'warning'
})

const { close } = props
const { type, message } = toRefs(props)

const iconStyle = {
  fontSize: '14px',
  marginRight: '10px'
}

const style = {
  warning: {
    color: '#F09E82',
    backgroundColor: '#FFFAF4',
  },
  error: {
    color: '#F08282',
    backgroundColor: '#FFF2F2',
  },
  success: {
    color: '#00B8A8',
    backgroundColor: '#F5FBFA',
  },
  info: {
    color: '#00B8A8',
    backgroundColor: '#FFFFFF',
  }
}

// 控制动画
const isShow = ref(false)
// 组件模板渲染成功后触发
onMounted(() => {
  isShow.value = true
})

function closeMessage() {
  close()
}
</script>
<style lang="less" scoped>
.down {
  &-enter {
    &-from {
      transform: translate3d(0, -75px, 0);
      opacity: 0;
    }
    &-active {
      transition: all 0.3s;
    }
    &-to {
      transform: none;
      opacity: 1;
    }
  }
}
.sw-message {
  z-index: 9999;
  max-width: 604px;
  position: fixed;
  left: 50%;
  top: 25px;
  transform: translateX(-50%);
  padding: 10px 13px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .info-box {
    flex: 1;
    color: #666666;
  }
  .close-icon {
    color: #8C8C8C;
    cursor: pointer;
  }
}
</style>
